<template>
  <v-layout type="main">
    <el-form class="form" ref="form" :model="formData" :rules="submitRules" label-width="124px">
      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="formData.username" />
      </el-form-item>
      <el-form-item label="昵称" prop="nick_name">
        <el-input type="text" v-model="formData.nick_name" />
      </el-form-item>
      <el-form-item label=" ">
        <el-button class="none-type" @click="submit">确定</el-button>
      </el-form-item>

    </el-form>
  </v-layout>
</template>

<script>
import { addUser, putUser, getUserDetail } from '@/api/user'
export default {
  data() {
    return {
      userName: '',
      formData: {
        username: '',
        nick_name: '',
        desc: '',
      },
      submitRules: {
        username: [
          { required: true, message: "请填写用户名" },
        ],
        nick_name: [
          { required: true, message: "请填写昵称" },
        ],
      }
    };
  },
  async created() {
    this.getData()
  },
  methods: {
    async getData() {
      if (this.$route.query.id) {
        let res = await getUserDetail({ id: this.$route.query.id })
        this.formData = res.data
        if (this.formData.roles != null) {
          this.formData.roles = this.formData.roles.join(',')
        }
      }
    },
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.$route.query.id) {
            await putUser({ ...this.formData })
          } else {
            await addUser({ ...this.formData })
          }
          this.$router.push({
            path: '/user'
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.form {
  padding: 20px 40px 0 0;
}
</style>